<!--
 * @Descripttion: 
 * @version: 1.0.0
 * @Author: guoxiaomin
 * @Email: 1093556028@qq.com
 * @Date: 2019-09-10 18:09:15
 * @LastEditors: guoxiaomin
 * @LastEditTime: 2019-09-12 10:13:44
 -->
<style lang="less" scoped>
.navPanel{
  position: fixed;
  z-index: 100;
  width: 100%;
  top: 0;
  left: 0;
  height: 100vh;
  overflow: auto;
  .close{
    position: fixed;
    z-index: 1;
    width: 0.58rem;
    height: 0.58rem;
    top: 0.31rem;
    right: 0.4rem;
  }
  .tab-item{
    width: 100%;
    height: 3.32rem;
    position: relative;
    .bg{
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
    .txtBox{
      position: absolute;
      left: 0.39rem;
      top: 0.9rem;
      .line{
        width: 0.46rem;
        height: 0.09rem;
        background: #FD371A;
      }
      .txt{
        color: #ffffff;
      }
      .cn{
        font-size: 0.48rem;
        margin-top: 0.12rem;
        height: 0.48rem;
      }
      .en{
        font-size: 0.26rem;
        margin-top: 0.22rem;
        height: 0.26rem;
      }
    }
  }
}
</style>
<template>
 <div class="navPanel">
    <div class="tab-item" v-for='(item, index) in arr' :key='index' @click="navLinkClicked(item.link)">
      <img :src="item.img" alt="" class="bg">
       <img src="../assets/wap/navClose@2x.png" alt="" class="close" v-if="index===0" @click.stop='close'>
      <div class="txtBox">
        <div class="line"></div>
        <p class="cn txt">{{item.name}}</p>
        <p class="en txt">{{item.en}}</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: [
        {
          name: '首页',
          en: 'HOME',
          link: '/',
          img: require('../assets/wap/navHome@2x.png')
        },
        {
          name: '我要借钱',
          en: 'BORROW MONEY',
          link: '/enterMoney',
          img: require('../assets/wap/navOut@2x.png')
        },
        {
          name: '我要出借',
          en: 'LEND',
          link: '/outMoney',
          img: require('../assets/wap/navAsk@2x.png')
        },
        {
          name: '关于我们',
          en: 'ABOUT US',
          link: '/about',
          img: require('../assets/wap/navAbout@2x.png')
        }
      ]
    }
  },
  methods:{
    navLinkClicked(link) {
      this.$emit('linked', link)
    },
    close() {
      this.$emit('close')
    }
  }
}
</script>